<template>
	<view style="background-color: #f6efe9;;">
		<!-- #ifndef MP -->
		<view class="cu-custom" :style="{color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222'}">

		</view>
		<!-- #endif -->

		<view class="wanl-user" style="position: relative;">
			<!-- style="background-image: url('../static/images/user/headbg.png');background-size: cover;" -->
			<image src="../static/images/user/headbg.png" style="position: absolute; width: 100%;z-index: 1;" mode=""></image>
			<view class="user" :style="{ paddingTop: $wanlshop.wanlsys().height + 'px' }">
				<view class="avatar margin-right-bj" @tap="portrai">
					<image class="round" :src="$wanlshop.oss(user.avatar, 62, 6, 2, 'avatar')" mode="aspectFill">
					</image>
				</view>
				<view class="content" style="display: flex;justify-content: space-between;" v-if="user.isLogin">
					<view>
						<view class="text-xxl" @tap="$wanlshop.auth('/pages/user/setting/user')">{{ user.nickname }}
						</view>
						<text>会员号：{{user.mobile}}</text>
					</view>
					<view style="margin-top: 2vw; width: 21.6vw;" @tap="$wanlshop.auth('/pages/user/signin/signin')">
						<view class="qian"
							style="z-index: 999; top: 19vw; right: 2.13vw;  width: 21.6vw;display: flex;align-items: center; border-radius: 10rpx; justify-content: center; background-color: #e2a11e;padding: 10rpx 0;">
							<image style="width: 4vw;height: 3.46vw;margin: 1vw; " src="../static/images/user/qd.png"
								mode=""></image>
							<text style="font-size: 3.2vw; color: white;">签到有礼</text>
							
							<!-- <text style="font-size: 3.2vw; color: white;" @tap="toHandle()">签到有测  toHandle</text> -->
						</view>
					</view>
				</view>
				<view class="content" @tap="toAuth()" v-else>
					<view class="text-xxl" style="color: black;" >登录 / 注册</view>
					<!-- <view class="cu-tag bg-orange sm radius">Hi</view> -->
					<view class="cu-tag wanl-bg-pink sm radius" style="background: #ffa202;padding: 18rpx 10rpx;" >Hi，欢迎登录</view>
				</view>
			</view>
			<!-- 会员 -->
			<view class="vip" 
				v-if="user.isLogin && (i === vipLi.length - 1 ? user.score >= item.points : item.points <= user.score && user.score < vipLi[i+1].points)"
				v-for="(item,i) in vipLi " :key="item.id" style="  position: relative;z-index: 9; bottom: -2vw; margin-left: 2.4vw; width:94.66vw;height: 32vw;font-weight: bold;
				  background-size: 100% 100%;margin-bottom: 40rpx;
            background-repeat: no-repeat;
				border-radius: 3%;">
				<!-- background-image: url('../static/images/user/vipbg.png');  -->
				<image style="position: absolute;width: 100%;height: 100%; z-index: 1; top: 0;" src="../static/images/user/vipbg.png" mode=""></image>
				<view class="top"
					style="position: relative;z-index: 9;display: flex; align-items: center; color: black; justify-content: space-between;">
					<view class="lf" style="display: flex;align-items: center;">
						<view style="display: flex;align-items: center; margin: 0vw 4vw; " class="nr">
							<image style="width: 5.6vw;height: 6.66vw;margin: 2vw"
								:src="$wanlshop.appstr(item.icon_img)" mode="aspectFit"></image>
							<text>{{item.name}}</text>
						</view>
						<view class="compute">
							<!-- <progress style="width: 21.33vw;height: 0.53vw;" percent="compute" value="66" max="200"  /> -->
						<!-- 	<ai-progress :noData="true" bg-color="#e7f918" in-bg-color="#b0971c" :stroke-width="2"
								style="display: block; width: 27.33vw;height: 0.53vw;"
								:percentage="(user.score/vipLi[i+1].points)*100 "></ai-progress> -->
							<text style="font-size: 2.66vw;">据升级还需获得{{vipLi[i+1].points - user.score}}积分</text>

						</view>
					</view>
					<view class="many" style="margin-right: 4vw;">
						<text style="font-size: 2.93vw;" @tap="$wanlshop.auth(`/pages/user/moreBenefits/moreBenefits?id=${1}`)">更多权益</text>
						<text style="font-size: 2.93vw;" class="wlIcon-fanhui2 margin-left-xs"></text>
					</view>
				</view>
				<view class="concent" style="position: relative;z-index: 9;" >
					<view class="nr"
						style="width: 25%; color: black; display: flex;flex-direction: column;align-items: center;"
						@tap="$wanlshop.auth(`/pages/user/moreBenefits/moreBenefits?id=${e.id}`)"
						v-for="(e,i)  in advantage " :key="e.id">
						<image :src="$wanlshop.appstr(e.icon_img)" mode="aspectFit"
							style="border-radius: 50%; width: 10.13vw;height: 10.13vw;margin-bottom: 6rpx;">
						</image>
						<text>{{e.name}}</text>
					</view>
				</view>
			</view>
			
			<view class="activity " style="font-size: 3.73vw; width:706rpx;margin-left: 2.6vw;position: relative;z-index: 99;bottom: 10rpx; ">
				<view class="bg-white radius grid text-center col-2 padding-lr-bj padding-tb-sm"
					style="padding-top: 2vw;">
					<view class=" flex justify-around" @tap="$wanlshop.auth('/pages/user/coupon/list')">
						<view class="content">
							<view class="wanl-black text-sm text-bold6" style="margin: 1vw 0;">优惠券</view>
							<view style="color: #aaa;font-size: 3.2vw;font-weight: normal;"
								class="text-min text-orange">
								领取优惠券
								<text class="wlIcon-fanhui2 margin-left-xs"></text>
							</view>
						</view>
						<image src="../static/images/user/uhq.png" mode="" style="width: 12vw;height: 12vw;"></image>
					</view>
					<view class="flex justify-around" @tap="$wanlshop.auth('/pages/user/signin/log')">
						<view class="content margin-left-bj">
							<view class="wanl-black text-sm text-bold6" style="margin: 1vw 0;">积分</view>
							<view
								style="letter-spacing: 0px;text-align: center;font-family: PingFang SC;line-height: normal;color: #aaa;font-size: 3.2vw;font-weight: normal;"
								class="text-min text-orange">
								查看积分明细
								<text class="wlIcon-fanhui2 margin-left-xs"></text>
							</view>
						</view>
						<image src="../static/images/user/hdblue.png" mode="" style="width: 12vw;height: 12vw;"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="wanl-user-order padding-sm margin-bj" style="margin-bottom: 10rpx; color: black ; font-weight: bold;position: relative;z-index: 99;top: 0;margin-top: 0; ">
			<view class="my" style="font-size: 4vw;font-weight: bold;">我的订单</view>
			<view class="project text-sm wanl-gray-dark"
				style="font-size: 2.93vw; font-weight: normal; margin-top: 2vw;">
				<view style="display: flex;flex-direction: column;align-items: center; color: black ;"
					@tap="$wanlshop.auth('/pages/user/order/order?state=1')">
					<image src="../static/images/user/qbag.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					待付款
					<view class="cu-tag badge bg-orange" v-if="statistics.order.pay > 0">
						{{ $wanlshop.toFormat(statistics.order.pay, 'hundred') }}
					</view>
				</view>

				<view style="display: flex;flex-direction: column;align-items: center; color: black ;"
					@tap="$wanlshop.auth('/pages/user/order/order?state=2')">
					<image src="../static/images/user/dbag.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					待发货
					<view class="cu-tag badge bg-orange" v-if="statistics.order.delive > 0">
						{{ $wanlshop.toFormat(statistics.order.delive, 'hundred') }}
					</view>
				</view>

				<view style="display: flex;flex-direction: column;align-items: center; color: black ;"
					@tap="$wanlshop.auth('/pages/user/order/order?state=3')">
					<image src="../static/images/user/dsh.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					待收货
					<view class="cu-tag badge bg-orange" v-if="statistics.order.receiving > 0">
						{{ $wanlshop.toFormat(statistics.order.receiving, 'hundred') }}
					</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=4')"
					style="display: flex;flex-direction: column;align-items: center; color: black ;">
					<image src="../static/images/user/pj.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					待评价
					<view class="cu-tag badge bg-orange" v-if="statistics.order.evaluate > 0">
						{{ $wanlshop.toFormat(statistics.order.evaluate, 'hundred') }}
					</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center; color: black ;"
					@tap="$wanlshop.auth('/pages/user/order/order?state=5')">
					<image src="../static/images/user/tk.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					退货/售后
					<view class="cu-tag badge bg-orange" v-if="statistics.order.customer > 0">
						{{ $wanlshop.toFormat(statistics.order.customer, 'hundred') }}
					</view>
				</view>
			</view>
		</view>


		<!-- 其他服务 -->
		<view class="wanl-user-tool padding-top-bj margin-lr-bj" style="margin-bottom: 10rpx; color: black ; font-weight: bold; ">
			<view class="it" style="margin:0 0 2vw 3.2vw; font-size: 4vw;font-weight: bold; color: black;">其他服务
			</view>
			<view style="display: flex;  font-size: 2.93vw;"
				class="list text-sm grid col-5 wanl-gray-dark">

				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/user/pet/pet')">
					<image src="../static/images/user/cwjy.png" style="width: 9vw;height: 9vw;margin: 2vw; "> </image>
					宠物领养
				</view>

				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/service/select_shop?header=true')">
					<image src="../static/images/user/selectShop.png" style="width: 9vw;height: 9vw;margin: 2vw; "> </image>
					选择店铺
				</view>
				
				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/user/selectShop/selectShop')">
					<image src="../static/images/user/yysm.png" style="width: 9vw;height: 9vw;margin: 2vw; "> </image>
					预约上门
				</view>

				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/user/address/address')">
					<image src="../static/images/user/dw.png" style="width: 9vw;height: 9vw;margin: 2vw; "> </image>
					收货地址
				</view>

				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/user/signin/signin')">
					<image src="../static/images/user/hd.png" style="width: 9vw;height: 9vw; margin: 2vw;"> </image>
					任务中心
					<view class="cu-tag badge bg-orange" v-if="statistics.order.groups > 0">
						{{ $wanlshop.toFormat(statistics.order.groups, 'hundred') }}
					</view>
				</view>


				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/user/aboutOur/aboutOur')">
					<image src="../static/images/user/our.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					关于我们
				</view>

				<view @click="toggle('bottom')" type="bottom"
					style="display: flex;flex-direction: column;align-items: center;width: 25%;">
					<button open-type="share" style="background-color: #fff;height: 62%;margin: 0;padding: 0;" class="borderless-button">
						<image src="../static/images/user/hz.png" style="margin: 2vw; width: 9vw;height: 9vw;"> </image>
					</button>
					分享给好友
				</view>
				
				<view style="display: flex;flex-direction: column;align-items: center;width: 25%;"
					@tap="$wanlshop.auth('/pages/user/shopAdd/shopAdd')">
					<image src="../static/images/user/dpjiam.png" style="width: 9vw;height: 9vw;margin: 2vw; "> </image>
					店铺加盟
				</view>

			</view>

	

			<!-- 普通弹窗 -->
			<view>
				<uni-popup type="bottom" mask-background-color="rgba(0,0,0,0.4)" ref="popup" background-color="#fff">
					<view style="width: 100vw;height: 160vw;">
						<wanl-share :scrollAnimation="scrollAnimation" shareTitle="我发现了一个很好的线上购物商城，这是商城类目"
							shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱" :image="$wanlshop.appstc('/common/logo.png')"
							:href="'https://shangya.gzzhenyi.net' + '/pages/user'" @change="hideModal" />
					</view>
				</uni-popup>
			</view>
		</view>
		
		<!-- 加盟公告栏 -->
	<!-- 	<view class="notice" @tap="$wanlshop.to('/pages/user/league/league')" style="font-size: 3.73vw; width:700rpx;margin-left: 3.4vw;margin-bottom: 10rpx;">
			<image style="width: 50rpx; height: 35rpx;" src="/static/images/default/notice-fff.png"
				mode="aspectFit"></image>
			<swiper class="swiper-notice" :indicator-dots="false" :autoplay="true" circular :interval="10000"
				:duration="1000">
				<swiper-item v-for="(item,index) in noticeList" :key="index">
					<view class="swiper-item">
						<text>{{item.title}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="wanl-you-like margin-bottom-sm"
			:style="{ backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')' }"></view>
		<wanl-product :dataList="likeData" />
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	// import ai-progress from "@/pages/user/ai-progress ";
	export default {
		// components:{
		// 	ai-progress
		// },
		data() {
			return {
				scrollAnimation: 300,
				modalName: null,
				headerOpacity: 0,
				// 上拉刷新
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				vipLi: [

				],
				// 加盟公告栏
				noticeList: [],
				// 会员权益
				advantage: []
			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShow() {
			// uni.navigateTo({
			// 	url: "/pages/invoice/list"
			// })
			// return

			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.appStyle.user_font_color == 'light' ? '#ffffff' :
						'#000000',
					backgroundColor: this.$store.state.common.appStyle.user_nav_color
				})
			}, 200);

			this.loadViplist()
			if (this.$store.state.user.isLogin) {
				this.loadData();
			}
		},
		onLoad() {
			// uni.navigateTo({
			// 	url: "/pages/invoice/list"
			// })
			// return

			// if (this.$store.state.user.isLogin) {
			// 	this.loadData();
			// }
			this.loadlikeData();
			// 加载公告
			this.loadNotice();
			this.loadShare();
		},
		onPageScroll(e) {
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadlikeData();
			}
		},
		// 分享好友
		onShareAppMessage: function (res) {
		    if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
				title: this.shareInfo.desc,
				path: '/pages/index',
				imageUrl: this.$wanlshop.oss(this.shareInfo.img, 50, 50)
			};
		},
		methods: {
            loadShare () {
				this.$api.get({
					url: '/wanlshop/product/hotsale',
					data: {},
					success: res => {
						const values = res.data.filter(number => number.row === '我的分享');
						console.log(values[0].img_url,'values'); 

						this.shareInfo = {
							desc: values[0].desc,
							img: values[0].img_url
						}
						// wx.downloadFile({
						// 	url: that.$wanlshop.oss(values.img_url, 688, 688),
						// 	success: (res) => {
						// 		that.shareInfo.img = res.tempFilePath
						// 	},
						// })	
					}
				})
			},
			// 获取会员升级相关
			async loadViplist() {
				this.$api.get({
					url: '/wanlshop/common/init',
					data: {
						version: "1.1.1"
					},
					success: res => {

						this.vipLi = res.modulesData.levelData;
						this.advantage = res.modulesData.advantage
						console.log(this.vipLi)
					}
				})
			},







			// 获取公告
			async loadNotice() {
				this.$api.post({
					url: '/wanlshop/article/getList',
					data: {
						category: '加盟'
					},
					success: res => {
						this.noticeList = res.data;
					}
				})
			},
			// 前往测试活动页面
			toActivity() {
				console.log(1)
				uni.switchTab({
					url: '/pages/page/activityPage'
				})
			},
			toAuth() {
				uni.navigateTo({
					url: "/pages/user/auth/name"
				})
			},
			toHandle() {
				uni.navigateTo({
					url: "/pages/invoice/index"
				})
			},
			toggle(type) {

				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				// this.$refs.popup.open(type)
			},
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},

			async loadData() {
				this.$api.post({
					url: '/wanlshop/user/refresh',
					success: res => {
						this.$store.commit('statistics/edit', res.statistics);
						this.$store.commit('user/setUserInfo', res.userinfo);
					}
				});
				uni.stopPullDownRefresh();
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: '/wanlshop/product/likes?pages=user',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			// 帮助
			help() {
				this.$wanlshop.to('/pages/user/help');
			},
			// 设置
			setting() {
				this.$wanlshop.to('/pages/user/setting/setting');
			},
			portrai() {
				this.$wanlshop.to('/pages/user/portrait/portrait');
			}
		}
	};
</script>

<style>
	.button::after{
	  border: 0;
	}
	
	.borderless-button::after {
	    border: none;
	    /* 根据需要添加其他样式 */
	  }
</style>
<style lang="scss">
	
	.concent {
		overflow-x: auto;
		display: -webkit-box;
		-webkit-overflow-scrolling: touch;
		margin: 0.5rem 0.5rem;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.cu-bar .action.mp:first-child>text[class*='wlIcon-'] {
		margin-left: 0;
	}

	.wanl-user {
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
	}

	.wanl-user .user {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		padding-bottom: 30rpx;
		position: relative;
		z-index: 999;
	}

	.wanl-user .user .avatar {
		position: relative;
		height: 123rpx;
		width: 123rpx;
		border-radius: 5000rpx;
		overflow: hidden;
		border: 3px solid rgba(255, 255, 255, .25);
	}

	.wanl-user .user .avatar image {
		height: 120rpx;
	}

	.wanl-user .user .avatar .tag {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.wanl-user .user .content {
		flex: 1;
	}

	/* 操作 */
	.wanl-user .operate {
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding-bottom: 70rpx;
		line-height: 1.3;
	}

	.wanl-user .operate text {
		display: block;
		font-size: 32rpx;
	}

	/* 活动 */
	.wanl-user .activity {
		position: absolute;
		width: 100%;
		bottom: -80rpx;
	}

	.wanl-user .activity .radius {
		border-radius: 24rpx;
	}

	.wanl-user .activity .cu-avatar {
		width: 69rpx;
		height: 69rpx;
		margin-right: 30rpx;
		background-color: transparent;
		/* border: 1px solid rgba(255,255,255,.6); */
	}

	.wanl-user .activity .content {
		text-align: left;
		height: 68rpx;
	}

	/* 订单 */
	.wanl-user-order {
		margin-top: 80rpx;
		border-radius: 24rpx;
		background-color: white;
	}

	.wanl-user-order .title {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.wanl-user-order .title text {}



	/* 状态 */
	.wanl-user-order .project {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.wanl-user-order .project>view {
		position: relative;
		flex: 1;
	}

	.wanl-user-order .project>view .cu-tag {
		top: -4rpx;
		right: 26rpx;
	}

	.wanl-user-order .project text {
		display: block;
		font-size: 50rpx;
		margin-bottom: 6rpx;
	}

	/* 物流 */
	.wanl-user-order .logistics {
		background-color: #f9f9f9;
		border-radius: 24rpx;
	}

	.wanl-user-order .logistics .swiper {
		height: 120rpx;
	}

	.wanl-user-order .logistics .swiper .title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		color: #999999;
	}

	.wanl-user-order .logistics .swiper .cu-avatar {
		margin-right: 10rpx;
		height: 66rpx;
		width: 66rpx;
		border-radius: 12rpx;
		background-color: #ffffff;
	}

	.wanl-user-order .logistics .swiper .content .text-df {
		color: #3797e0;
		font-size: 27rpx;
		margin-bottom: 2rpx;
	}

	.wanl-user-order .logistics .swiper .content .text-sm {
		color: #999999;
	}

	.wanl-user-order .logistics .swiper .content text {
		font-size: 32rpx;
		margin-left: 15rpx;
		margin-right: 10rpx;
	}

	/* 工具箱 */
	.wanl-user-tool {
		background-color: #ffffff;
		border-radius: 24rpx;
	}

	.wanl-user-tool .title {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.wanl-user-tool .title text {
		margin-left: 2rpx;
	}

	/* 状态 */
	.wanl-user-tool .list {
		text-align: center;
	}

	.wanl-user-tool .list>view {
		margin-bottom: 28rpx;
		position: relative;
	}

	.wanl-user-tool .list>view .cu-tag {
		top: -8rpx;
		left: 80rpx;
		right: unset;
	}

	.wanl-user-tool .list text {
		display: block;
		font-size: 54rpx;
		margin-bottom: 8rpx;
	}

	// 活动公告栏
	.notice {
		height: 60rpx;
		margin: 20rpx 0rpx 20rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		border-radius: 8rpx;
		background-color: #ff550050;
		background: linear-gradient(to right, #ed4d31 -10%, #f97e38 50%);
		padding: 0 14rpx;
		color: #fff;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);


		.swiper-notice {
			width: 100%;
			height: 100%;
			font-size: 26rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;


				text {
					width: 90%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>